<template>
  <div class="screen">

    <div class="chart-container item1">
      <div id="pieChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="chart-container item2">
      <div id="lineChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="chart-container item3">
      <div id="RadarChart" style="width: 100%; height: 100%;"></div>
    </div>

    <div class="chart-container item4">
      <div id="BarChart" style="width: 100%; height: 100%;"></div>
    </div>
  </div>


</template>

<script>
// import { values } from 'core-js/core/array';
import * as echarts from 'echarts';
// import { AxisPointerComponent } from 'echarts/components';
// import { Container } from 'element-ui';

export default {
  name: "OverallDisplay",
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.initPieChart();
      this.initLineChart();
      this.initRadarChart();
      this.initBarChart();
    },

    // 饼图
    initPieChart() {
      const pieChartDom = document.getElementById('pieChart');
      const pieChart = echarts.init(pieChartDom);
      const pieOption = {
        title: {
          text: '市场份额占比',
          subtext: '2023-12-25',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '市场份额',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '服装' },
              { value: 735, name: '手机数码' },
              { value: 580, name: '家用电器' },
              { value: 484, name: '家用家具' },
              { value: 300, name: '汽车用品' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(pieOption);
    },

    // 曲线图
    initLineChart() {
      const lineChartDom = document.getElementById('lineChart');
      const lineChart = echarts.init(lineChartDom);
      const lineOption = {
        title: {
          text: '上周销售额',
          subtext: '2023-12-25',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      lineChart.setOption(lineOption);
    },

    //雷达图
    initRadarChart() {
      const RadarChartDom = document.getElementById('RadarChart');
      const RadarChart = echarts.init(RadarChartDom);
      const RadarOption = {
        title: {
          text: '销售额分布情况'
        },
        legend: {
          data: ['第一季度', '第二季度'],
          left: 0,
          top: 30
        },
        radar: {

          indicator: [
            { name: '其他', max: 6500 },
            { name: '汽车用品', max: 16000 },
            { name: '家用电器', max: 30000 },
            { name: '手机数码', max: 38000 },
            { name: '服装', max: 52000 },
            { name: '家用家具', max: 25000 }
          ]
        },
        series: [
          {
            name: '两季度销售额',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '第一季度'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '第二季度'
              }
            ]
          }
        ]
      };

      RadarChart.setOption(RadarOption);
    },

    //柱状图
    initBarChart() {
      var BarChartDom = document.getElementById('BarChart');
      var BarChart = echarts.init(BarChartDom);
      var BarOption;

      BarOption = {
        title: {
          text: '上周销售额'
        },
        tooltip:{
          trigger:"axis",
          axisPointer:{
            type:'shadow'
          }
        },
        grid:{
          left:'50vh',
          right:'35vh',
          bottom:'40vh',
          Containlabel:true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick:{
            alignWithLabel:true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'Derect',
            barWidth:'60vh',
            data: [120, {
              value:200,
              itemStyle:{
                color:'red'
              }
            }, 150, 80, 70, 110, 130],
            type: 'bar',
            // showBackground: true,
            
            backgroundStyle:{
              color:'rgba(180,180,180,0.2)'
            }
          }
        ]
      };

      BarChart.setOption(BarOption);
    }
  },
}
</script>

<style scoped>
/* .chart-container{
  width: 80%; height: 60%;
} */

.screen {
  width: 100%;
  height: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.chart-container {
  border: 1px solid #ccc;
  /* 添加边框以创建一个盒子 */
  border-radius: 5px;
  /* 圆角效果 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  /* overflow: auto; */
  /* 确保内容超出时可以滚动 */
  /* padding: 20px; */
  /* 内边距 */
  background-color: white;
  /* 背景颜色 */
  /* width: 80%; */
}

/* 可选: 在小屏幕上使图表动态适应 */
@media (max-width: 600px) {
  .chart-container {
    width: 90%;
    /* 更窄的宽度 */
    height: 60%;
    /* 调整高度 */
  }
}
</style>

